<div v-bind:class="[componentId]">
  <cly-header>
      <template v-slot:header-left>
          <h2> {{i18n('app-versions.title')}} </h2>
          <cly-tooltip-icon :tooltip="description" icon="ion ion-help-circled" style="margin-left:8px" placement="bottom-end"> </cly-tooltip-icon>
      </template>
  <template v-slot:header-right>
        <cly-more-options v-if="topDropdown" size="small">
          <el-dropdown-item :key="idx" v-for="(item, idx) in topDropdown">
            <!--<span :class="item.icon"></span>-->
            <a :href="item.value" class="bu-ml-1">{{item.label}}</a>
          </el-dropdown-item>
        </cly-more-options>
      </template>
  </cly-header>
  <cly-main>
  <cly-date-picker-g class="app-version-date-picker-container"></cly-date-picker-g>
  <div class="bu-columns bu-is-gapless bu-mt-2">
    <h4>App versions for </h4>
    <div class ="selector_wrapper">
      <el-select v-model="selectedProperty" :arrow="false" :adaptiveLength="true">
        <el-option :key="item.value" :value="item.value" :label="item.name" v-for="item in chooseProperties"></el-option>
      </el-select>
    </div>
    <h4>&nbsp;&nbsp;as </h4>
    <div class ="selector_wrapper">
      <el-select v-model="selectedDisplay" :arrow="false" :adaptiveLength="true">
        <el-option :key="item.value" :value="item.value" :label="item.name" v-for="item in chooseDisplay"></el-option>
      </el-select>
    </div>
  </div>
  <cly-section>
    <cly-chart-bar :valFormatter="appVersionStackedOptions.valFormatter" :option="appVersionStackedOptions" :patch-x-axis="false" :no-hourly="true" v-loading="isLoading" :force-loading="isLoading" category="user-analytics"> </cly-chart-bar>
  </cly-section>
  <cly-section>
    <cly-datatable-n  :rows="appVersionRows" :resizable="true" :force-loading="isLoading">
      <template v-slot="scope">
        <el-table-column sortable="custom" prop="app_versions" :label="i18n('app-versions.table.app-version')"></el-table-column>
        <el-table-column sortable="custom" prop="t" :formatter="numberFormatter" :label="i18n('common.table.total-sessions')"></el-table-column>
        <el-table-column sortable="custom" prop="u" :formatter="numberFormatter" :label="i18n('common.table.total-users')"></el-table-column>
        <el-table-column sortable="custom" prop="n" :formatter="numberFormatter" :label="i18n('common.table.new-users')"></el-table-column>
      </template>
    </cly-datatable-n>
  </cly-section>
  </cly-main>
</div>
